<template>
  <div class="all-bill-box">
    <div class="bill-add">
      <el-button
          type="success"
          @click="showCreate"
      >
        +添加报销登记
      </el-button>
    </div>
    <div class="bill-table">
      <div class="table_box">
        <el-table
            :data="tableDate"
            stripe
            style="width: 98%;height: 88vh"
            border
            max-height="88vh"
            empty-text="暂无数据"
        >
          <el-table-column
              fixed
              prop="finance_index"
              label="ID"
              width="60"
              align="center"
          />
          <el-table-column
              prop="total_money"
              label="报销总金额(元)"
              width="150"
              align="center"
          />
          <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="120"
          >
            <template #default="{row}">
              <el-tag type="info" v-if="row.status === 0">已提交</el-tag>
              <el-tag type="warning" v-else-if="row.status === 1">审批中</el-tag>
              <el-tag type="success" v-else>已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="flow_uploader_name"
              label="申请人"
              width="150"
              align="center"
          />
          <el-table-column
              prop="bill_no"
              label="报销凭证编号"
              align="center"
              width="330"
          />
          <el-table-column
              prop="bill_date"
              label="原始单据日期"
              align="center"
              width="180"
          >
            <template #default="{row}">
              {{computeDate(row.bill_date)}}
            </template>
          </el-table-column>
          <el-table-column
              prop="enter_month"
              label="入账月份"
              align="center"
              width="120"
          >
            <template #default="{row}">
              {{row.enter_month}}月
            </template>
          </el-table-column>
          <el-table-column
              label="录入时间"
              width="180"
              align="center"
          >
            <template #default="{row}">
              {{sliceDate(row.created_at)}}
            </template>
          </el-table-column>
          <el-table-column
              prop="flow_operator_name"
              label="当前/最后审批人"
              align="center"
              width="150"
          />
          <el-table-column
              label="操作"
              align="center"
          >
            <template #default="{row}">
              <el-button
                  type="primary"
                  size="small"
                  @click="showDetails(row.application_id)"
              >
                详情
              </el-button>
              <el-button
                  type="primary"
                  size="small"
                  @click="delFinanceApprove(row.application_id,row.status)"
              >
                撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <CreateFinance ref="createRef" @reload="getLists"/>
  <FinPreDialog ref="billDetail"/>
</template>

<script setup>
import {ElButton, ElMessage, ElMessageBox, ElTable, ElTableColumn, ElTag} from "element-plus"
import {onMounted, ref} from "vue"
import CreateFinance from "@/components/Finance/Bill/CreateFinance.vue"
import {computeDate, createMsg} from "@/lib/utils.js"
import {getBills} from "@/api/Finance/Bill"
import FinPreDialog from "@/components/Finance/Bill/FinPreDialog.vue"
import emitter from "@/lib/eventBus"
import {recallFlow} from "@/api"
import {createFinanceApprove, delFinance} from "@/api/OA/Finance"

let userInfo

const tableDate = ref([])

const createRef = ref()
const billDetail = ref()

onMounted(()=>{
  emitter.emit('home_menu','/all_bill')
  userInfo = JSON.parse(localStorage.getItem('syhyDocManSys'))
  getLists()
})

const getLists = async () => {
  try {
    const {data:res} = await getBills({
      userId:userInfo.id
    })
    if (res.code === 200){
      tableDate.value = res.data
    } else if (res.code === 201) {
      return ElMessage({
        message:'暂无报销申请',
        type:'info'
      })
    } else if (res.code === 400){
      tableDate.value = []
    }
  } catch (e) {
    console.log(e)
  }
}

const showCreate = () => {
  createRef.value.show()
}

const checkBillDetail = (id) => {

}

const showDetails = (id) => {
  billDetail.value.showDetails(id)
}

const delFinanceApprove = async (id,status) => {
  if(status === 2) return createMsg('已完成的流程不能撤销!','info',true)
  try {
    const con = window.confirm('撤销后该流程无法恢复,确认操作吗?')
    if (con){
      const {data:res}=await delFinance(id)
      if (res.code === 200){
        await getLists()
        createMsg('撤回成功!','success',true)
      } else if (res.code === 400){
        return ElMessage({
          message:'撤回失败!',
          type:'warning'
        })
      }
    }
  } catch (error) {
    // 如果点击取消或者发生其他错误，则处理错误
    console.log(error)
  }
}

const sliceDate = (utc_datetime) => {
  let new_datetime = utc_datetime.split("T")[0] + " " + utc_datetime.split("T")[1].split(".")[0]

  // 处理成为时间戳
  let timestamp = new Date(new_datetime.replace(/-/g, '/')).getTime()
  timestamp = timestamp / 1000
  // 增加8个小时，北京时间比utc时间多八个时区
  timestamp = timestamp + 8 * 60 * 60

  // 时间戳转为时间
  let date = new Date(parseInt(timestamp) * 1000)
  let YY = date.getFullYear() + '-'
  let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
  let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
  return YY + MM + DD + " " + hh + mm + ss
}
</script>

<style scoped lang="less">
.all-bill-box{
  box-sizing: border-box;
  padding: 0 1vh;
  border: 1px solid lightgray;
  margin-left: 8.5vw;
  margin-top: 2vh;
  width: 91vw;
  height: 96.5vh;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 7px 7px lightgray;
  .bill-add{
    margin-top: 1vh;
    height: 5vh;
    line-height: 5vh;
    text-align: left;
    padding-left: 1vw;
  }
  .bill-table{
    .table_box{
      width: 92vw;
    }
  }
}
</style>
